<template>
  <div class="ExamViewMain">
    <div class="examDataAdd qsgMain ExamViewBody">
      <div class="examTop">
        <div style="display: flex; align-items: center">
          <img :src="titleImg" alt="" style="width: 80px; margin-top: -3px" />
          <div
            style="margin: 0px 10px; height: 25px; border-left: 1px solid #fff"
          ></div>
          <template v-if="examConfig.testName.length > 30">
            <el-tooltip
              class="item"
              effect="light"
              :content="examConfig.testName"
              placement="top-start"
            >
              <span>{{ examConfig.testName.substring(0, 30) }}...</span>
            </el-tooltip>
          </template>
          <template v-else>
            {{ examConfig.testName }}
          </template>
        </div>
        <div class="ExamViewBtn" v-if="!isThank">
          <div class="blockStyle">用户名：{{ realName }}</div>
          <!-- 空白试卷提交时接口返回错误，暂时不能提交空白试卷 -->
        </div>
      </div>
      <el-alert
        title="仅用于内容预览，请勿用于正式考试。"
        type="warning"
        show-icon
      >
      </el-alert>
      <div class="examContent" v-loading="loading">
        <div class="left">
          <div class="answerSheet">
            <div style="color: black; margin-bottom: 20px">
              <div style="font-weight: 700; line-height: 45px">答题卡</div>
              <div style="color: #9597a0">
                共{{ examConfig.subjectNum }}题&nbsp;合计{{
                  examConfig.totalScore
                }}分
              </div>
            </div>
            <div class="sheetContent">
              <template v-for="(column, index) in examFormOption.column">
                <div
                  :key="index"
                  class="indexStyle"
                  :style="
                    column.isActive
                      ? 'background-color: #3ad3bd;color:#fff;'
                      : 'background-color: #f4f5f7;color:#c7cad3'
                  "
                  v-if="column.typeExam !== 'htmlExam'"
                  v-html="resetIndexFun(column.prop, examFormOption.column)"
                  @click.stop="sheetClick(column.prop)"
                ></div>
              </template>
            </div>
            <hr />
            <div class="colorContent">
              <div>
                <div class="colorBlock" style="background-color: #3ad3bd"></div>
                <span>已做</span>
              </div>
              <!-- <div>
                <div class="colorBlock" style="background-color: #ffbc7d"></div>
                <span>当前</span>
              </div> -->
              <div>
                <div class="colorBlock" style="background-color: #f4f5f7"></div>
                <span>未做</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            class="ExamView"
            id="ExamViewRightMain"
            v-if="examConfig.subjectNum > 0"
          >
            <ExamViewCom
              ref="examFormRef"
              :data="examFormData"
              :option="examFormOption"
              :examConfig="examConfig"
              :key="examFormKey"
              :showTime="true"
              :isDetail="isDetail"
              @formChange="formChange"
            >
            </ExamViewCom>
          </div>
          <div class="employe" v-else>
            <img
              class="employeImg"
              src="@/assets/iconfont/employe.png"
              alt=""
            />
            <div>暂无数据</div>
          </div>
        </div>
      </div>
      <div class="cusSet">
        <div v-if="captchaTag">
          <el-form :model="captchaForm" class="captchaForm" ref="captchaRef">
            <el-form-item
              class="captchaItem"
              prop="captchaValue"
              label="验证码"
              label-width="120px"
              :rules="[
                {
                  required: true,
                  message: '请输入验证码',
                  trigger: 'blur',
                },
              ]"
            >
              <div class="captchaContent">
                <el-input
                  v-model="captchaForm.captchaValue"
                  class="captchaInput"
                  size="small"
                ></el-input>
                <div class="captchaRight">
                  <img
                    :src="captchaImg"
                    @click.stop="getCaptcha"
                    class="captchaImg"
                  />
                  <el-link
                    type="primary"
                    @click.stop="getCaptcha"
                    :underline="false"
                    class="captchaChange"
                    >(换一个)</el-link
                  >
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/styles/qsgCommon.scss";

import ExamViewCom from "@/components/examViewCom/index";
import { isNull } from "@/util/qsgCommon";
import { getStore } from "@/util/store";

import { getTestById } from "@/api/exam/examDataAdd";

export default {
  name: "examView",
  components: {
    ExamViewCom,
  },
  props: {
    propParams: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      resultData: {},
      isLimit: false,
      timeRemaining: "",
      realName: "",
      isDetail: false,
      examFormKey: 1,
      examId: "",
      titleImg: require("@/assets/exam/exam-book.png"),

      loading:true,

      examFormOption: {
        column: [],
        submitBtn: false,
        emptyBtn: false,
      },
      examFormData: {},
      examConfig: {
        examConfig: 0,
        testName: "",
      },

      captchaTag: false,
      captchaImg: "",
      captchaKey: "",

      captchaForm: {
        captchaValue: "",
      },
    };
  },
  methods: {
    // 答题form修改时
    formChange(val) {
      let itemOption = val;
      this.examFormOption.column.map((item) => {
        item.isActive = false;
        if (item.typeExam !== "htmlExam") {
          if (
            item.typeExam !== "inputExam" &&
            !this.validatenull(itemOption[item.prop])
          ) {
            item.isActive = true;
          }
          if (item.typeExam === "inputExam") {
            item.dicData.map((obj) => {
              if (!this.validatenull(itemOption[obj.value])) {
                item.isActive = true;
              }
            });
          }
        }
      });
      this.$forceUpdate();
    },
    // 答题卡序号
    resetIndexFun(prop, allColumn) {
      let res = '<i class="el-icon-warning" style="color: #f05050;"></i>';
      let tempColumn = allColumn.filter((item) => item.typeExam != "htmlExam");
      if (tempColumn.length > 0) {
        tempColumn.map((item, key) => {
          if (item.prop == prop) {
            res = key + 1;
          }
        });
      }
      return res;
    },
    async getActiveExam() {
      this.realName = getStore({ name: "userInfo" }).realName;
      if (this.propParams.examId) {
        this.examId = this.propParams.examId;
      } else if (this.desktop) {
        this.examId = this.desktopWindow.data.query.examId;
        if (!this.validatenull(this.desktopWindow.data.query.type)) {
          this.type = this.desktopWindow.data.query.type;
        }
      } else {
        this.examId = this.$route.query.examId;
        if (!this.validatenull(this.$route.query.type)) {
          this.type = this.$route.query.type;
        }
      }
      if (isNull(this.examId)) {
        this.$message.error("试卷参数设置错误。");
        return false;
      }

      await getTestById({
        operationType: 2,
        id: this.examId,
      }).then((res) => {
        const dataRes = res.data.data;
        this.isHasAnswer = "";
        this.examConfig = dataRes;
        this.loading = false

        //是否开启验证码
        // this.captchaTag = dataRes.isCaptcha == 1 ? true : false;

        // this.getCaptcha();
        if (dataRes.limitStatus) {
          this.isLimit = true;
        }
        if (isNull(dataRes.editorFrontJsonOfUser)) {
          this.$message.error("试卷问题设置错误。");
        } else {
          this.examFormOption = JSON.parse(dataRes.editorFrontJsonOfUser);
          this.examFormOption.column.map((item) => {
            if (item.typeExam !== "htmlExam") {
              item.isActive = false;
            }
          });
        }

        this.examFormKey++;
      });
    },
    sheetClick(id) {
      // document.getElementById(id).scrollIntoView();
      const mainElement = document.getElementById("ExamViewRightMain");
      const itemElement = document.getElementById(id);
      if (mainElement && itemElement) {
        // mainElement.scrollTop = itemElement.offsetTop; // 设置滚动位置到目标元素的顶部
        // 如果需要平滑滚动
        mainElement.scroll({ top: itemElement.offsetTop, behavior: "smooth" });
      } else {
        window.console.log(`未找到元素：#ExamViewRightMain 或 ${id}`);
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      // 打开右键
      document.oncontextmenu = new Function("event.returnValue=false");
      // 打开选择
      document.onselectstart = new Function("event.returnValue=false");
      //   // 打开F12
      document.onkeydown = () => {
        if (window.event && window.event.keyCode == 123) {
          return false;
        }
        if (window.event.shiftKey && window.event.keyCode == 121) {
          return false;
        }
        //禁用ctrl + v 功能
        // if (window.event.ctrlKey && window.event.keyCode == 86) {
        //   return false;
        // }
        if (
          window.event.ctrlKey &&
          window.event.shiftKey &&
          window.event.keyCode == 73
        ) {
          return false;
        }
      };
    });
  },
  created() {
    this.getActiveExam();
  },
  destroyed() {
    document.onkeydown = () => {
      if (window.event && window.event.keyCode == 123) {
        return true;
      }
      if (window.event.shiftKey && window.event.keyCode == 121) {
        return true;
      }
      if (
        window.event.ctrlKey &&
        window.event.shiftKey &&
        window.event.keyCode == 73
      ) {
        return true;
      }
    };
    document.onselectstart = new Function("event.returnValue=true");
    document.oncontextmenu = new Function("event.returnValue=true");
  },
  watch: {
    $route: "getActiveExam",
    "desktopWindow.data": {
      handler() {
        this.getActiveExam();
      },
      deep: true,
    },
    propParams: {
      handler() {
        this.getActiveExam();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.ExamViewMain {
  width: 100%;
  height: 100%;
  // background-color: #f5f5f5;
  // overflow-y: auto;
}
.ExamViewBody {
  // max-width: 1000px;
  min-height: 100%;
  margin: 0 auto;
  padding: 0px !important;
  background-color: #e9ebee;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .examTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #2b3643;
    line-height: 50px;
    color: #fff;
    padding: 0 15px;
    .examUseTime {
      margin-right: 15px;
    }
    .blockStyle {
      margin-right: 15px;
      background-color: #364150;
      color: #fff;
      height: 35px;
      font-size: 14px;
      line-height: 35px;
      padding: 0 15px;
      border-radius: 5px;
    }
  }
  .examContent {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 0px 15px;
    margin-top: 20px;
    .left {
      width: 350px;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      padding-right: 0px;
    }
    .right {
      width: calc(100% - 370px);
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      padding-right: 0px;
    }
  }
  .answerSheet {
    text-align: center;
    height: calc(100vh - 160px);
    overflow-y: auto;
    .sheetContent {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      color: #c7cad3;
      .indexStyle {
        width: 53px;
        height: 53px;
        line-height: 60px;
        background-color: #f4f5f7;
        margin: 0px 9px 9px 0;
        border-radius: 5px;
        cursor: pointer;
      }
    }
    .colorContent {
      display: flex;
      justify-content: space-around;
      align-items: center;
      > div {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .colorBlock {
        width: 18px;
        height: 18px;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }
  .ExamView {
    height: calc(100vh - 160px);
    overflow-y: auto;
    padding-right: 20px;
    a {
      text-decoration: underline;
      color: #0045c8;
    }
  }
  .employe {
    padding: 40px 0;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;
    color: #c7cad3;
    font-size: 14px;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;

    .employeImg {
      width: 150px;
      width: 150px;
    }
  }
  .thankModule {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.ExamViewBtn {
  text-align: center;
  display: flex;
  align-items: center;
}
.cusSet {
  .captchaForm {
    border-top: 2px solid #e4e7ed;
    padding-top: 15px;
    .captchaItem {
      .captchaContent {
        display: flex;

        .captchaInput {
          width: 180px;
          max-width: 300px;
        }
        .captchaRight {
          display: flex;
          .captchaImg {
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
